let leftArrow = document.querySelector('.leftArrow');
let rightArrow = document.querySelector('.rightArrow');
let ul = document.querySelector('ul');
let ol = document.querySelector('ol');
let pointList = document.querySelectorAll('.pointList li');
let box = document.querySelector('.box');
let index = 0;
let lastIndex = 0;
let timer = null;
let isRun = false;
leftArrow.addEventListener('click', () => {
  if (!isRun) {
    isRun = true;
    ++index === ul.childElementCount && (index = 0);
    run();
  }

  // console.log(index);
  // ol.querySelector('.active').classList.remove('active');
  // ol.children[index].classList.add('active');
});
rightArrow.addEventListener('click', () => {
  if (!isRun) {
    isRun = true;
    --index === -1 && (index = ul.childElementCount - 1);
    run();
  }
  // if (index < 0) {
  //   index = 3;)
  // }
  // console.log(index);
  // ol.querySelector('.active').classList.remove('active');
  // ol.children[index].classList.add('active');
});

pointList.forEach((item, i) => {
  item.addEventListener('click', () => {
    // for (let i = 0; i < ol.children.length; i++) {
    //   ol.children[i].className = '';
    // }
    index = i;
    run();
  });
});

function run() {
  ul.style.transform = `translateX(-${index}00%)`;
  pointList[lastIndex].classList.remove('active');
  pointList[index].classList.add('active');
  lastIndex = index;
  ul.addEventListener(
    'transitionend',
    () => {
      console.log('123');
      isRun = false;
    },
    { once: true }
  );
}

// timer = setInterval(() => {
//   ++index === ul.childElementCount && (index = 0);
//   run();
// }, 2000);

// box.addEventListener('mouseenter', () => {
//   clearInterval(timer);
// });
// box.addEventListener('mouseleave', () => {
//   timer = setInterval(() => {
//     ++index === ul.childElementCount && (index = 0);
//     run();
//   }, 2000);
// });
